<template>
    <div class="game-talk-list" v-loading="loading">
        <div class="input-box">
            <el-input
                placeholder="请输入关键字"
                clearable
                @keyup.enter.native="getList(1)"
                style="width:200px;"
                v-model.trim="keyword">
                <i slot="prefix" class="el-input__icon el-icon-search"></i>
            </el-input>
            <el-select
                style="margin-left:10px;width: 300px;"
                v-model="gameId"
                clearable
                filterable
                @change="getList(1)"
                :filter-method="filterMethod"
                :loading="gameLoading"
                placeholder="请输入并选择游戏">
                <el-option
                    v-for="item in gameList"
                    :key="item.gameid"
                    :label="item.appName"
                    :value="item.gameid">
                        <span style="float: left">{{ item.appName }}</span>
                        <span style="float: right; color: #8492a6; font-size: 13px">{{ item.gameid }}</span>
                </el-option>
            </el-select>

            <el-select
                style="margin-left:10px;width:150px"
                @change="getList(1)"
                v-model="status">
                <el-option label="全部" :value="-3"></el-option>
                <el-option label="显示" :value="1"></el-option>
                <el-option label="禁用" :value="0"></el-option>
                <el-option label="系统删除" :value="-2"></el-option>
                <el-option label="用户删除" :value="-1"></el-option>
            </el-select>

            <el-button type="primary" class="btn" @click="getList(1)">搜索</el-button>
        </div>

        <div class="table-box">
                <!-- max-height="700" -->
            <el-table
                :data="tableData"
                border
                style="width: 100%">
                <el-table-column
                    fixed
                    prop="commentid"
                    label="点评id">
                </el-table-column>
                <el-table-column
                    prop="score"
                    label="评分">
                </el-table-column>
                <el-table-column
                    width="600"
                    prop="content"
                    label="点评内容">
                </el-table-column>
                <el-table-column
                    width="180"
                    prop="gamename"
                    label="游戏名称">
                </el-table-column>
                <!-- <el-table-column
                    width="110"
                    prop="test"
                    label="游戏时长">
                </el-table-column> -->
                <el-table-column
                    prop="thumbsNum"
                    sortable
                    width="100"
                    label="点赞数">
                </el-table-column>
                <!-- <el-table-column
                    prop="gameTopic"
                    sortable
                    label="举报数">
                </el-table-column> -->
                <el-table-column
                    prop="treadNum"
                    width="100"
                    sortable
                    label="吐槽数">
                </el-table-column>
                <el-table-column
                    width="110"
                    prop="replyNum"
                    sortable
                    label="回复条数">
                </el-table-column>
                <el-table-column
                    prop="rewardNum"
                    width="100"
                    sortable
                    label="打赏数">
                </el-table-column>
                <el-table-column
                    prop="username"
                    width="180"
                    label="点评者">
                </el-table-column>
                <el-table-column
                    width="110"
                    label="点评时间">
                    <template slot-scope="scope">
                        <div style="text-align:center;">{{scope.row.createTime | timeNo0}}</div>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="status"
                    fixed="right"
                    :sortable="true"
                    label="状态">
                    <template slot-scope="scope">
                        <div style="color: #F56C6C;" v-if="scope.row.status === -2">系统删除</div>
                        <div v-else-if="scope.row.status === -1">用户删除</div>
                        <div style="color: #F56C6C;" v-else-if="scope.row.status === 0">
                            <div class="point red-point"></div>
                            <span>已禁用</span>
                        </div>
                        <div style="color:#67C23A;" v-else-if="scope.row.status === 1">
                            <span class="point"></span>
                            <span>显示中</span>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column
                    fixed="right"
                    label="点评操作">
                    <template slot-scope="scope">
                        <!-- -2系统删除-1用户删除0未显示1显示中 -->
                        <div v-if="scope.row.status === 1">
                            <div><el-button @click="changeGameTalkStatus(scope.row, 0)" type="text" size="small" style="color:#F56C6C;">禁用</el-button></div>
                            <div v-if="scope.row.reject !== 1"><el-button @click="showDalogBox(scope.row)" type="text" size="small" style="color:#909399;">驳回</el-button></div>
                        </div>

                        <div v-else-if="scope.row.status === 0">
                            <div><el-button @click="changeGameTalkStatus(scope.row, 1)" type="text" size="small" style="color:#67C23A;">启用</el-button></div>
                        </div>

                        <div><el-button @click="goCommentDetail(scope.row.commentid)" type="text" size="small">查看详情</el-button></div>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <div class="tools">
            <el-pagination
                @size-change="sizeChange"
                @current-change="pageChange"
                :current-page="pageNum"
                :page-sizes="_pageSizes"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
        </div>

        <el-dialog
            title="驳回理由"
            :visible.sync="dialogVisible"
            class="dialog-box"
            width="500px">
            <div class="radio-item" @click="dialogStatus = 1" :class="{'currentRadioItem': dialogStatus === 1}">
                <el-radio v-model="dialogStatus" :label="1"><span></span></el-radio>
                <span>您的评分与评语无关联，请在24小时内修改并提交，逾期系统将自动屏蔽不展示。</span>
            </div>
            <div class="radio-item" @click="dialogStatus = 2" :class="{'currentRadioItem': dialogStatus === 2}">
                <el-radio v-model="dialogStatus" :label="2"><span></span></el-radio>
                <span>您发表了与游戏无关的评价内容，系统已自动屏蔽，您无法获得相应的金币。</span>
            </div>
            <div class="radio-item" @click="dialogStatus = 3" :class="{'currentRadioItem': dialogStatus === 3}">
                <el-radio v-model="dialogStatus" :label="3"><span></span></el-radio>
                <span>您发表了无意义的灌水信息、重复刷屏的评价内容，系统已自动屏蔽，您无法获得相应的金币。</span>
            </div>

            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="rejectTalk">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
export default {
    data () {
        return {
            keyword: '',
            status: -3, // -2系统删除-1用户删除0未显示1显示中
            gameId: '',
            gameList: [],
            tableData: [],
            pageNum: 1,
            pageSize: this._pageSize,
            total: 0,
            gameLoading: false,
            loading: false,
            dialogStatus: 1, // 驳回type 1 24小时之后禁用  2直接驳回 3直接驳回（文案不同）
            dialogVisible: false // 驳回弹窗
        }
    },
    activated () {
        // 更好的缓存数据
        if (this.listParams) {
            this.keyword = this.listParams.keyword
            this.gameId = this.listParams.gameId
            this.gameList = this.listParams.gameList
        }
        this.getList(this.pageNum)
    },
    methods: {
        // 获取点评列表
        async getList (pageNum = 1) {
            if (this.loading) return
            this.loading = true
            this.pageNum = pageNum
            this.listParams = {
                pageIndex: pageNum,
                pageNum: this.pageSize
            }
            if (this.keyword) {
                this.listParams.keyword = this.keyword
            }
            if (this.gameId) {
                this.listParams.gameId = this.gameId
            }
            this.listParams.status = this.status >= -2 ? this.status : null
            let res = await this.$http.post('/game/findGameComment', this.listParams)
            if (res.code === '0') {
                this.tableData = res.data
                this.total = res.count
                this.listParams.gameList = this.gameList
            } else {
                this.$message({
                    type: 'error',
                    message: '系统异常，请稍后再试'
                })
            }
            this.loading = false
        },

        // 查询游戏
        filterMethod (res) {
            clearTimeout(this.timerId)
            if (!res) {
                this.gameLoading = false
                return
            }
            this.gameLoading = true
            this.timerId = setTimeout(() => {
                this.getgameList(res)
            }, 1000)
        },
        async getgameList (keyword) {
            let params = {
                keyword,
                pageIndex: 1,
                pageNum: 100
            }
            let res = await this.$http.post('/home/findGames', params)
            if (res.code === '0') {
                this.gameList = res.data
            } else {
                this.$message({
                    type: 'error',
                    message: '系统异常，请稍后再试'
                })
            }
            this.gameLoading = false
        },

        // 页容切换
        sizeChange (num) {
            this.pageSize = num
            this.getList(1)
        },

        // 页码切换
        pageChange (num) {
            this.pageNum = num
            this.getList(this.pageNum)
        },

        // 跳转至视频详情
        goVideoDetail (id) {
            this.$router.push({
                path: '/video/videoDetail',
                query: {
                    id
                }
            })
        },

        // 更改视频状态
        async changeGameTalkStatus (item, status) {
            // 状态:0禁用 1启用
            let params = {
                commentId: item.commentid,
                status
            }
            // /game/updateGameCommentStatus
            // /video/updateVideoCommentStatus
            let res = await this.$http.post('/game/updateGameCommentStatus', params)
            if (res.code === '0') {
                item.status = status
                this.$message({
                    type: 'success',
                    message: '修改成功'
                })
            } else {
                this.$message({
                    type: 'error',
                    message: res.desc
                })
            }
        },

        // 显示驳回弹窗
        showDalogBox (item) {
            this.currentItem = item
            this.dialogVisible = true
        },

        // 驳回评论
        async rejectTalk () {
            this.dialogVisible = false
            let params = {
                commentId: this.currentItem.commentid,
                status: this.dialogStatus
            }
            let res = await this.$http.post('/game/reject', params)
            if (res.code === '0') {
                if (params.status === 2 || params.status === 3) {
                    this.currentItem.status = 0
                }
                this.currentItem.reject = 1
                this.$message({
                    type: 'success',
                    message: '驳回成功'
                })
            } else {
                this.$message({
                    type: 'error',
                    message: res.desc
                })
            }
        },

        // 查看视频详情
        goCommentDetail (id) {
            if (id) {
                this.$router.push({
                    path: '/game/gameTalkDetail',
                    query: {
                        id
                    }
                })
            } else {
                this.$router.push('/game/gameTalkDetail')
            }
        }
    }
}
</script>

<style lang="scss" scoped>
    .game-talk-list {
        .input-box {
            .btn {
                margin-left: 10px;
            }
        }
        .table-box {
            margin: 20px 0;
            .app-icon {
                width: 60px;
                height: 60px;
                > img {
                    width: 100%;
                    height: 100%;
                }
            }
        }

        .point {
            display:inline-block;
            width:10px;
            height:10px;
            border-radius: 50%;
            background-color:#67C23A;
            margin-right:3px;
        }
        .red-point {
            background-color: #F56C6C;
        }

        .tools {
            padding-right: 20px;
            display: flex;
            justify-content: flex-end;
        }

        .dialog-box {
            /deep/ .el-dialog__body {
                padding: 10px 20px 0;
            }
            .radio-item {
                margin-bottom: 5px;
                cursor: pointer;
                /deep/ .el-radio {
                    margin-right: 0px;
                }
            }
            .currentRadioItem {
                color: #409EFF;
            }
        }
    }
</style>
